<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="80%">
    <div class="drawingTaskDialog" v-loading="formLoading">
      <div class="headerLogo">
        <img src="@/assets/imgs/hasColorLogo.png" />
        <span>延期申请单</span>
      </div>
      <div class="formView">
        <el-row class="rowItem">
          <el-col :span="6" class="colItem">
            <div class="formTitle">延期申请编号</div>
            <div class="formContent">{{ formData.extensionalCode }}</div>
          </el-col>
          <el-col :span="6" class="colItem">
            <div class="formTitle">订单号</div>
            <div class="formContent">{{ formData.orderNumber }}</div>
          </el-col>
          <el-col :span="6" class="colItem">
            <div class="formTitle">订单类型</div>
            <div class="formContent">{{
              getDictLabel('market_order_type', formData.dictOrderType)
            }}</div>
          </el-col>
          <el-col :span="6" class="colItem">
            <div class="formTitle">客户代码</div>
            <div class="formContent">{{ formData.customerCode }}</div>
          </el-col>
        </el-row>
        <el-row class="rowItem">
          <el-col :span="6" class="colItem">
            <div class="formTitle">任务类型</div>
            <div class="formContent">
              {{ getDictLabel('task_type', formData.dictTaskType) }}
            </div>
          </el-col>
          <el-col :span="6" class="colItem">
            <div class="formTitle">产品编号</div>
            <div class="formContent">{{ formData.productNumber }}</div>
          </el-col>
          <el-col :span="6" class="colItem">
            <div class="formTitle">产品规格</div>
            <div class="formContent">{{ formData.productStandard }}</div>
          </el-col>
          <el-col :span="6" class="colItem">
            <div class="formTitle">交货日期</div>
            <div class="formContent">{{ formData.deliveryTime }}</div>
          </el-col>
        </el-row>
        <el-row class="rowItem">
          <el-col :span="6" class="colItem">
            <div class="formTitle">产品制图开始日期</div>
            <div class="formContent">{{ formData.planStartDate }}</div>
          </el-col>
          <el-col :span="6" class="colItem">
            <div class="formTitle">产品制图结束日期</div>
            <div class="formContent">{{ formData.planEndDate }}</div>
          </el-col>
          <el-col :span="6" class="colItem">
            <div class="formTitle">下单日期</div>
            <div class="formContent">{{ formData.placeOrderDate }}</div>
          </el-col>
          <el-col :span="6" class="colItem">
            <div class="formTitle">订单数量</div>
            <div class="formContent">{{ formData.orderQuantity }}</div>
          </el-col>
        </el-row>
        <el-row class="rowItem">
          <el-col :span="6" class="colItem">
            <div class="formTitle">出图类型</div>
            <div class="formContent">
              {{ getDictLabel('dict_drawing_type', formData.dictDrawingType) }}
            </div>
          </el-col>
          <el-col :span="6" class="colItem">
            <div class="formTitle">产品类型</div>
            <div class="formContent">{{ formData.productType }}</div>
          </el-col>
          <el-col :span="6" class="colItem">
            <div class="formTitle">部件类型</div>
            <div class="formContent">{{
              formType == 'add' ? formData.tasks[0].partType : formData.partType
            }}</div>
          </el-col>
          <el-col :span="6" class="colItem">
            <div class="formTitle">设计员</div>
            <div class="formContent">{{
              formType == 'add' ? formData.tasks[0].designerPersonName : formData.designerPersonName
            }}</div>
          </el-col>
        </el-row>
        <el-row class="rowItem">
          <el-col :span="8" class="colItem">
            <div class="formTitle">原计划开始日期</div>
            <div class="formContent">{{
              formType == 'add' ? formData.tasks[0].planStartDate : formData.planStartDate
            }}</div>
          </el-col>
          <el-col :span="8" class="colItem">
            <div class="formTitle">原计划结束日期</div>
            <div class="formContent">{{
              formType == 'add' ? formData.tasks[0].planEndDate : formData.planEndDate
            }}</div>
          </el-col>
          <el-col :span="8" class="colItem">
            <div class="formTitle">原额定工时</div>
            <div class="formContent">{{
              formType == 'add'
                ? formData.tasks[0].ratedOperatingTime
                : formData.oldRatedOperatingTime
            }}</div>
          </el-col>
        </el-row>
        <el-row class="rowItem">
          <el-col :span="8" class="colItem">
            <div class="formTitle"><span style="color: red">*</span>申请计划开始日期</div>
            <div class="formContent" style="background-color: #fff">
              <el-date-picker
                style="width: 180px"
                v-model="editData.exPlanStartTime"
                type="date"
                value-format="YYYY-MM-DD"
                :disabled="formType == 'detail'"
              />
            </div>
          </el-col>
          <el-col :span="8" class="colItem">
            <div class="formTitle"><span style="color: red">*</span>申请计划结束日期</div>
            <div class="formContent" style="background-color: #fff">
              <el-date-picker
                style="width: 180px"
                v-model="editData.exPlanEndTime"
                type="date"
                value-format="YYYY-MM-DD"
                :disabled="formType == 'detail'"
              />
            </div>
          </el-col>
          <el-col :span="8" class="colItem">
            <div class="formTitle"><span style="color: red">*</span>申请额定工时</div>
            <div class="formContent" style="background-color: #fff">
              <el-input
                v-model="editData.exRatedOperatingTime"
                :disabled="formType == 'detail'"
                type="number"
              />
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <template #footer>
      <el-button
        @click="submitForm"
        type="primary"
        :disabled="formLoading"
        v-show="formType != 'detail'"
        >提 交</el-button
      >
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { getDictLabel } from '@/utils/dict'
import * as DrawingTaskApi from '@/api/technology/drawingTask'
const dialogVisible = ref(false) // 弹窗的是否展示
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const dialogTitle = ref('申请延期') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：edit - 编辑；detail - 查看 add - 新增
const formData = ref({
  // 表单数据
  id: undefined,
  extensionalCode: undefined,
  orderNumber: undefined,
  customerCode: undefined,
  dictTaskType: undefined,
  productNumber: undefined,
  productStandard: undefined,
  deliveryTime: undefined,
  placeOrderDate: undefined,
  planStartDate: undefined,
  planEndDate: undefined,
  orderQuantity: undefined,
  dictDrawingType: undefined,
  productType: undefined,
  drawingComponentId: undefined,
  dictOrderType: undefined
})
const editData = ref({
  //填写数据
  exPlanStartTime: null,
  exPlanEndTime: null,
  exRatedOperatingTime: null,
  taskId: null //任务单Id
})
/** 打开弹窗 */
const open = async (data: object, type: string) => {
  formType.value = type
  // 不是新增
  if (type != 'add') {
    formLoading.value = true
    try {
      formData.value = await DrawingTaskApi.getExtensionRequestDetail({ id: data.id })
      editData.value = {
        exPlanStartTime: formData.value.exPlanStartTime,
        exPlanEndTime: formData.value.exPlanEndTime,
        exRatedOperatingTime: formData.value.exRatedOperatingTime,
        taskId: data.taskId, //任务单id
        id: data.id //延期申请id
      }
    } finally {
      formLoading.value = false
    }
  } else {
    formData.value = data
    editData.value = {
      exPlanStartTime: null,
      exPlanEndTime: null,
      exRatedOperatingTime: null,
      taskId: data.id
    }
  }
  dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const ruleList = ref(['', null, undefined])
const submitForm = async () => {
  formLoading.value = true
  try {
    console.log(editData.value)
    for (let i in editData.value) {
      if (ruleList.value.includes(editData.value[i])) {
        message.error('必填项不能为空')
        return
      }
    }
    await DrawingTaskApi.subExtensionRequest(editData.value)
    message.error(t('common.updateSuccess'))
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}
</script>

<style lang="scss" scoped>
.drawingTaskDialog {
  padding: 0 20px;
  .headerLogo {
    display: flex;
    align-items: flex-end;
    img {
      width: 260px;
      height: 50px;
    }
    span {
      width: 140px;
      display: inline-block;
      font-size: 26px;
      margin-left: calc(50% - 330px);
    }
  }
  .formView {
    border: 1px solid #000;
    .rowItem + .rowItem {
      border-top: 1px solid #000;
    }
    .colItem + .colItem {
      border-left: 1px solid #000;
    }
    .colItem {
      display: flex;
      > div {
        line-height: 40px;
      }
      .formContent {
        flex: 1;
        flex-shrink: 0;
        background-color: rgb(240, 240, 240);
        text-align: center;
      }
      .formTitle {
        flex-shrink: 0;
        width: 150px;
        height: 100%;
        line-height: 32px;
        background: #e9fbfb;
        text-align: center;
        border-right: 1px solid #000;
      }
    }
  }
  :deep(.el-input__wrapper, .el-textarea__inner) {
    width: 100%;
    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
  }

  :deep(.el-textarea__inner) {
    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
  }
}
</style>